<template>
  <el-col>
    <el-form
      class="widget-table widget-view widget-view-drag"
      :class="{
        active: selectWidget.key && selectWidget.key == element.key
      }"
      @click.native.stop="handleSelectWidget(index)"
      :label="element.name"
    >
      <!-- @click.native.stop="handleSelectWidget(index)"-->

      <div class="sub-header" ng-click="selectField(field)">
        <h4 class="ng-binding" style="margin:8px">
          {{
            element.options.showTitle == undefined
              ? element.name
              : element.options.showTitle
              ? element.name
              : ""
          }}
        </h4>
      </div>

      <div class="widget-table-wrapper">
        <div class="widget-table-content">
          <el-card class="box-card">
            <el-tabs
              v-model="element.options.activeName"
              @tab-click="handleClick"
              :stretch="element.options.stretch"
              :tab-position="element.options.tabPosition"
              :type="element.options.tabsType"
            >
              <el-tab-pane
                v-for="(item, tabIndex) in element.options.options"
                :name="item.value"
                :label="item.value"
                :key="item.value"
              >
                <draggable
                  style="height: 100px"
                  v-model="element.tabColumns[tabIndex]"
                  v-bind="{
                    group: { name: 'people', put: handlePut },
                    ghostClass: 'ghost',
                    animation: 200,
                    handle: '.drag-widget'
                  }"
                  :no-transition-on-drag="true"
                  @add="handleWidgetTableAdd($event, element, tabIndex)"
                  @change="handleWidgetTableChange"
                >
                  <transition-group
                    name="fade"
                    tag="div"
                    class="widget-table-col"
                    style="96%"
                  >
                    <tabs-block-item
                      v-for="(item, index) in element.tabColumns[tabIndex]"
                      v-if="item.key"
                      :key="item.key"
                      :element="item"
                      :select.sync="selectWidget"
                      :index="tabIndex"
                      :elementIndex="index"
                      :data="element.tabColumns[tabIndex]"
                      @select-change="
                        handleSelectChange($event, item, tabIndex)
                      "
                    >
                      <el-row></el-row>
                    </tabs-block-item>
                  </transition-group>
                </draggable>
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </div>
      </div>

      <div class="widget-view-action widget-col-action">
        <button
          type="button"
          class="show-circle action-delete"
          @click.stop="handleWidgetDelete(index)"
          v-if="selectWidget.key == element.key"
        >
          <i class="iconfont icon-trash"></i>
        </button>
      </div>
    </el-form>
  </el-col>
</template>

<script>
import Draggable from "vuedraggable";
import TabsBlockItem from "./TabsBlockItem";

export default {
  components: {
    Draggable,
    TabsBlockItem
  },
  props: ["element", "select", "index", "data", "elementIndex"],
  data() {
    return {
      selectWidget: this.select
      // columnsWidthStyle: '96%'
    };
  },
  mounted() {
    // this.calcTableColumnsWidth()
  },
  methods: {
    handleSelectWidget(index) {
      this.selectWidget = this.data.list[index];
    },
    handleClick(tab, event) {
      var index = tab.index;
    },
    handleWidgetDelete(index) {
      if (this.data.list.length == 1) {
        this.$emit("select-change", -1);
      } else {
        if (this.data.list.length - 1 == index) {
          this.$emit("select-change", index - 1);
        } else {
          this.$emit("select-change", index);
        }
      }

      this.data.list.splice(index, 1);
    },
    handleWidgetTableChange($event) {},
    calcTableColumnsWidth() {
      // this.columnsWidth = (this.element.tableColumns.length+1)*200

      this.columnsWidthStyle = "calc(200px)";

      let widthArray = [];

      for (let i = 0; i < this.element.tableColumns.length; i++) {
        if (
          !this.element.tableColumns[i].options.width ||
          this.element.tableColumns[i].options.width == "100%"
        ) {
          widthArray.push("200px");
        } else {
          widthArray.push(this.element.tableColumns[i].options.width);
        }
      }

      this.columnsWidthStyle = `calc(200px + ${widthArray.join(" + ")})`;
    },
    handlePut(a, b, c) {
      if (
        c.className.indexOf("widget-col") >= 0 ||
        c.className.indexOf("widget-table") >= 0 ||
        c.className.indexOf("no-put") >= 0 ||
        c.children[0].className.indexOf("no-put") >= 0
      ) {
        return false;
      }
      return true;
    },
    handleWidgetTableAdd($event, table, tabsIndex) {
      try {
        const newIndex = $event.newIndex;
        const key = new Date().getTime() + "";
        this.$set(table.tabColumns[tabsIndex], newIndex, {
          ...table.tabColumns[tabsIndex][newIndex],
          options: {
            ...table.tabColumns[tabsIndex][newIndex].options,
            remoteFunc:
              table.tabColumns[tabsIndex][newIndex].options.remoteFunc ||
              "func_" + key,
            width: "200px"
          },
          novalid: {
            ...table.tabColumns[tabsIndex][newIndex].novalid
          },
          key,
          model: table.tabColumns[tabsIndex][newIndex].model
            ? table.tabColumns[tabsIndex][newIndex].model
            : table.tabColumns[tabsIndex][newIndex].type + "_" + key,
          rules: table.tabColumns[tabsIndex][newIndex].rules
            ? [...table.tabColumns[tabsIndex][newIndex].rules]
            : []
        });

        if (
          Object.keys(table.tabColumns[tabsIndex][newIndex].options).includes(
            "options"
          )
        ) {
          this.$set(table.tabColumns[tabsIndex], newIndex, {
            ...table.tabColumns[tabsIndex][newIndex],
            options: {
              ...table.tabColumns[tabsIndex][newIndex].options,
              options: [
                ...table.tabColumns[tabsIndex][newIndex].options.options.map(
                  item => ({
                    ...item
                  })
                )
              ]
            }
          });
        }

        this.selectWidget = table.tabColumns[tabsIndex][newIndex];
      } catch (e) {}
    },
    handleSelectChange(index, item) {
      setTimeout(() => {
        index >= 0
          ? (this.selectWidget = this.element.tabColumns[index])
          : (this.selectWidget = {});
      });
    }
  },
  watch: {
    select(val) {
      if (val) {
        this.selectWidget = val;
      } else {
        this.selectWidget = this.element;
      }
    },
    selectWidget: {
      deep: true,
      handler(val) {
        this.$emit("update:select", val);
      }
    },
    element: {
      deep: true,
      handler(val) {
        //  this.calcTableColumnsWidth()
      }
    }
  }
};
</script>
<style>
.el-input {
  /* width: 100%  !important; */
}

.el-textarea {
  /* width: 100%  !important; */
}
</style>
